<template>
    <div style="width: 1250px;" v-loading="loading">
      <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/Main' }" >首页</el-breadcrumb-item>
          <el-breadcrumb-item >人事看板</el-breadcrumb-item>
      </el-breadcrumb>
      <br>
        <el-row :gutter="20">
            <el-col :span="7" :offset="0">
                <div
                class="inline-flex"
                style="box-shadow: var(--el-box-shadow-light);width: 320px;height: 100px;"
                m="2"
                >
                    <el-row :gutter="20">
                        <el-col :span="8" :offset="0">
                            
                        </el-col>
                        <el-col :span="8" :offset="0">
                            <p :style="{ fontSize: '40px', fontWeight: 'bold' }" style="height: 65px;">{{ LeavingCount }}</p>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            <p style="margin-top: 10px;">当月入职人数</p>
                        </el-col>
                    </el-row>
                <hr>
                <el-button type="primary" link size="default" style="margin-top: 5px;margin-left: 10px;" @click="entry">查看详情</el-button>
                </div>
            </el-col>
            <el-col :span="7" :offset="0">
                 <div
                class="inline-flex"
                style="box-shadow: var(--el-box-shadow-light);width: 320px;height: 100px;"
                m="2"
                >    
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">

                    </el-col>
                    <el-col :span="8" :offset="0">
                        <p :style="{ fontSize: '40px', fontWeight: 'bold' }" style="height: 65px;">{{ LeavingCounts }}</p>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <p style="margin-top: 10px;">当月离职人数</p>
                    </el-col>
                </el-row>
                <hr>
                <el-button type="primary" link size="default" style="margin-top: 5px;margin-left: 10px;" @click="resignation">查看详情</el-button>
                </div>
            </el-col>
            <el-col :span="7" :offset="0">
                 <div
                class="inline-flex"
                style="box-shadow: var(--el-box-shadow-light);width: 250px;height: 100px;"
                m="2"
                >    
                    <p :style="{ fontSize: '40px', fontWeight: 'bold' }" style="margin-left: 20px;">{{ count }}</p>
                    <p style="margin-left: 20px;">员工总人数</p>
                </div>
            </el-col>
        </el-row>
        <br>
        <el-row :gutter="20">
            <el-col :span="10" :offset="0">
                <div
                class="inline-flex"
                style="box-shadow: var(--el-box-shadow-light);width: 500px;height: 300px;"
                m="2"
                >
                    <br>
                    <e-charts :option="options" />
                </div>
            </el-col>
            <el-col :span="10" :offset="0">
                <div
                class="inline-flex"
                style="width: 500px;height: 300px;"
                m="2"
                >
                    <e-charts :option="option" />
                </div>
            </el-col>
        </el-row>
        <br>
        <el-row :gutter="20">
            <el-col :span="10" :offset="0">
                <div
                class="inline-flex"
                style="width: 500px;height: 300px;"
                m="2"
                >
                    <e-charts :option="optionse" />
                </div>
            </el-col>
            <el-col :span="10" :offset="0">
                <div
                class="inline-flex"
                style="width: 500px;height: 300px;"
                m="2"
                >
                    <e-charts :option="optioned" />
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
import { ref, computed, onMounted } from 'vue';

const router = useRouter()

const work = ref([]);

const option = ref({
  title: {
    text: '工龄比',
    left: 'left',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: 'bottom',
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [], // 初始化为空，待后续更新
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});

// 定义数据项的类型
interface AgeGroupData {
  AgeGroup: string;
  Count: number;
}

// 定义响应式数据
const AgeGroupdata = ref<AgeGroupData[]>([]);  // 明确指定类型是 AgeGroupData[]
// 定义 `options` 类型
interface Options {
  title: {
    text: string;
    left: string;
  };
  xAxis: {
    type: string;
    axisLabel: {
      show: boolean;
    };
  };
  yAxis: {
    type: string;
    data: string[];  // 明确指定 yAxis.data 为 string[] 类型
  };
  series: [
    {
      data: number[];  // 明确指定 series[0].data 为 number[] 类型
      type: string;
      showBackground: boolean;
      backgroundStyle: {
        color: string;
      };
      label: {
        show: boolean;
        position: string;
        valueAnimation: boolean;
      };
    }
  ];
}

// 初始化 `options`，并注解类型为 `Options`
const options = ref<Options>({
  title: {
    text: '员工年龄比',
    left: 'left',
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      show: false,
    },
  },
  yAxis: {
    type: 'category',
    data: [], // 空数组，稍后会填充
  },
  series: [
    {
      data: [], // 空数组，稍后会填充
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)',
      },
      label: {
        show: true,
        position: 'right',
        valueAnimation: true,
      },
    },
  ],
});

interface deps{
    name: string,
    value: number
}
const dep = ref<deps[]>([])

interface optionsez{
  title: {
    text: string,
    left: string, // 标题居中
    top: string   // 将标题放置到底部
  },
  xAxis: {
    type: string,
    data: string[]
  },
  yAxis: {
    type: string
  },
  series: [
    {
      data: number[],
      type: string
    }
  ]
}
const optionse = ref<optionsez>({
  title: {
    text: '部门人数',
    left: 'center', // 标题居中
    top: 'bottom'   // 将标题放置到底部
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'bar'
    }
  ]
});

interface ops{
  Month: string,
  LeaveCount: number
}
const op = ref<ops[]>([])
interface optioned{
  title: {
    text: string,
    left: string, // 标题居中
    top: string   // 将标题放置到底部
  },
  xAxis: {
    type: string,
    data: string[]
  },
  yAxis: {
    type: string,
    axisLabel: {},
    min: number,  // 设置 Y 轴最小值为 0 或其他适当值
    max: {},
    interval: number  // 设置每个刻度间隔为 1
  },
  series: [
    {
      data: number[],
      type: string
    }
  ]
}
const optioned = ref<optioned>({
  title: {
    text: '离职人数',
    left: 'center', // 标题居中
    top: 'bottom'   // 将标题放置到底部
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}',  // 确保 Y 轴刻度值是整数
    },
    min: 0,  // 设置 Y 轴最小值为 0 或其他适当值
    max: function (value:any) {
      // 根据数据的最大值设置 Y 轴的最大值，可以让它自动向上取整
      let maxValue = Math.ceil(value.max / 10) * 10; // 取最大值的 10 的倍数
      return maxValue;
    },
    interval: 1  // 设置每个刻度间隔为 1
  },
  series: [
    {
      data: [],
      type: 'line'
    }
  ]
});

// 异步获取数据并更新 option
const WorkExperienceGroupAsync = () => {
  axios.get('/pread/api/ReadRegister/WorkExperienceGroup').then((res) => {
    work.value = res.data;

    // 更新 option 中的 data
    option.value.series[0].data = work.value;
  });
};

const LeavingCount = ref<number>();
// 异步获取数据并更新 当月入职人数
const GetLeavingCountForCurrentMonth = () => {
    axios.get('/pread/api/ReadEntryManage/GetLeavingCountForCurrentMonth').then(res => {
        LeavingCount.value=res.data
    });
};
const LeavingCounts = ref<number>();
// 异步获取数据并更新 当前月离职人数
const GetLeavingCountForCurrentMonths = () => {
  axios.get('/pread/api/ReadResignationManage/GetLeavingCountForCurrentMonth').then((res) => {
      LeavingCounts.value = res.data;
      console.log(res.data)
  });
};

//获取员工年龄比
const AgeGroup = async () => {
    try {
    const res = await axios.get('/pread/api/ReadRegister/AgeGroup');
    AgeGroupdata.value = res.data;
    options.value.yAxis.data = AgeGroupdata.value.map(x => x.AgeGroup);
    options.value.series[0].data = AgeGroupdata.value.map(x => x.Count);
    } catch (error) {
    console.error('获取数据失败:', error);
    }
};

// 异步获取数据并更新 部门人数
const DepartmentCounts = () => {
  axios.get('/pread/api/ReadRegister/DepartmentCounts').then((res) => {
      dep.value = res.data
    optionse.value.xAxis.data = dep.value.map(x => x.name);
    optionse.value.series[0].data = dep.value.map(x => x.value);
  });
};

// 异步获取数据并更新 一年每月离职人数
const GetAllResignation = () => {
  axios.get('/pread/api/ReadResignationManage/GetAllResignation').then((res) => {
    op.value = res.data
    optioned.value.xAxis.data = op.value.map(x => x.Month);
    optioned.value.series[0].data = op.value.map(x => x.LeaveCount);
    loading.value = false;
  });
};

const count = ref();
//获取员工总人数
const GetCount = () => {
  axios.get("/pread/api/ReadRegister/GetCount").then(res => {
    count.value = res.data
  })
}

const loading = ref(true)

const entry = () => {
  router.push("EntryView")
}

const resignation = () => {
  router.push("ResignationView")
}

onMounted(() => {
  WorkExperienceGroupAsync()
  AgeGroup()
  GetCount()
  GetLeavingCountForCurrentMonth()
  GetLeavingCountForCurrentMonths()
  DepartmentCounts()
  GetAllResignation()
})
</script>
<style scoped>
.demo-border .line .dashed {
  border-top: 2px dashed var(--el-border-color);
}
body {
  margin: 0;
}

/* 调整加载图标的位置 */
.example-showcase .el-loading-mask {
  z-index: 9999;
  position: fixed;  /* 固定在屏幕上 */
  top: 50%;  /* 垂直居中 */
  left: 50%;  /* 水平居中 */
  transform: translate(-50%, -50%); /* 使图标完全居中 */
}
</style>